<template>
  <div id="index">
    <header class="header">
      <div class="middle">
        <div class="logo"></div>
        <div class="search-box">
          <el-input placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
        </div>
      </div>
    </header>
    <ul class="nav nav-group">
      <li
        class="nav-item"
        :class="{ 'active': index === activeIndex }"
        v-for="(item, index) in navList"
        :key="index"
        @click="changeActiveIndex(index)"
      >{{ item.text }}</li>
    </ul>
    <nuxt />
    <footer class="footer">
      <div class="middle">
        <ul class="links">
          <li>常用链接</li>
          <li v-for="(item, index) in links" :key="index">
            <a :href="item.path">{{ item.text }}</a>
          </li>
        </ul>

        <div class="logo">
          <img src="~/assets/images/logo2.png" alt />
        </div>
        <div class="text">
          <h2>计算机科学与工程学院</h2>
          <p>0773-2253021</p>
          <p>电子邮件：jsjs@guat.edu.cn</p>
          <p>
            Copyright
            <span class="iconfont">&#xe7f9;</span> 桂林航天工业学院 计算机科学与工程学院
          </p>
        </div>
        <div class="QRCode">
          <img src="~/assets/images/QRCode.jpg" alt width="100" height="100" />
          <span>微信公众号</span>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        { path: "/", text: "学院首页" },
        { path: "/my_summary", text: "学院概况" },
        { path: "/teacher", text: "师资队伍" },
        { path: "/subject", text: "学科专业" },
        { path: "/research", text: "教学科研" },
        { path: "/party", text: "建档工作" },
        { path: "/group-learning", text: "团学工作" },
        { path: "/download", text: "文表下载" }
      ],
      links: [
        { path: "", text: "学校主页" },
        { path: "", text: "教务系统" },
        { path: "", text: "精品课程" },
        { path: "", text: "科研工作量" },
        { path: "", text: "等级考试" },
        { path: "", text: "授课工作量" }
      ],
      activeIndex: 0
    };
  },
  methods: {
    changeActiveIndex(index) {
      this.activeIndex = index;
      this.$router.push(this.navList[index].path);
    }
  },
  watch: {
    $route(to, from) {
      if (to.path === "/") {
        this.activeIndex = 0;
      }
    }
  }
};
</script>

<style lang="less">
.bl1 {
  border-left: 1px solid #1371ac;
}
#index {
  .header {
    width: 100%;
    height: 105px;
    background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
    box-shadow: 0 10px 10px #ccc;
    .middle {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      .search-box {
        width: 270px;
        height: 30px;
        float: right;
        margin-top: calc(105px / 2 - 15px);
      }
    }
  }
  .nav {
    width: 1200px;
    margin: 0 auto;
    height: 45px;
    display: flex;
    .nav-item {
      flex: 1;
      color: #000;
      border-right: 1px solid #1371ac;
      text-align: center;
      line-height: 45px;
      cursor: pointer;
      &.active {
        background: linear-gradient(#ccc, #face35);
      }
      &:nth-child(1) {
        border-left: 1px solid #1371ac;
      }
    }
  }
  .footer {
    width: 100%;
    height: 315px;
    min-width: 1250px;
    background-color: #252c31;
    .middle {
      height: 100%;
      width: 75vw;
      min-width: 1250px;
      margin: 0 auto;
      .links {
        display: flex;
        border-bottom: 1px solid #737678;
        li {
          flex: 1;
          border-left: 1px solid #737678;
          text-align: center;
          font-size: 16px;
          margin: 1vw 0 1vw;
          a {
            color: #3ba2df;
          }
          &:nth-child(1) {
            border-left: none;
            color: #ccc;
          }
        }
      }
      .logo {
        float: left;
        padding-right: 2.75vw;
        margin-top: 2vw;
      }
      .text {
        float: left;
        color: #ebeeee;
        padding-left: 2.75vw;
        border-left: 1px solid #737678;
        margin-top: 2vw;
      }
      .QRCode {
        float: right;
        color: #ebeeee;
        margin-top: 2vw;
        span {
          display: block;
          font-size: 16px;
          text-align: center;
        }
      }
    }
  }
}
</style>